<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul li {
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 3px solid red;
        margin-left: -3px;


    }

    ul li:hover {
        /*如果盒子没有定位 则添加相对定位*/
        /*如果Li 有定位 则用z-index 提高层级*/
        position: relative;
        border: 3px solid blue;
    }

    .box {
        margin-top: 100px;
        text-align: center;
    }

    .box a {
        display: inline-block;
        /* width: 36px;

        height: 36px; */
        padding: 0 10px;
        /*用padding 撑开盒子更方便*/
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 36px;
        text-decoration: none;
        color: #333;
    }

    .box .current,
    .box .elp {
        border: 0;
        /*已经选中的状态*/
        background-color: #fff;
    }

    .box input {
        height: 36px;
        width: 45px;
        border: 1px solid #ccc;
        outline: none;
        /*取消input 框选中状态*/
    }
</style>

<body>
    <!-- <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul> -->

    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第<input type="text">页 <button>确定</button>
    </div>
    <script>
        //利用margin 负值 把盒子重叠在一块 避免盒子边框的叠加
        //但是盒子重叠 导致a:hover鼠标经过变色显示不全 (给盒子添加相对定位不脱标)
        // 利用浮动 让文字围绕图片(这不就是浮动原本的意义)

        // 
    </script>
</body>

</html>